import {Container, Button, Form} from 'react-bootstrap';
import style from './{{table['alias']} + "Form"}.module.css'
import {save, update} from '@/api/{{table['alias']}}'
import {useState, useEffect, useCallback} from "react";


function {table['camel']}Form() {

    const [model, setModel] = useState({});

    useEffect(() => {
        
    }, []);

    const handleChange = useCallback((e, name) => {
        // console.log(e, name);
        model[name] = e.target.value;
        setModel(model);
    }, [model])

    const handleData = (data) => {
        if(!data){
            setModel({});
        }else{
            setModel(data);
        }
    };

    const submit = () => {
        // console.log(model);
        if(model.id){
            update(model).then(res => {
                toast.success("success");
            })
        }else{
            save(model).then(res => {
                toast.success("success");
            })
        }
    }

    return (
        <Container fluid="md">
            <Form>
                {% for column in table['columns'] if column['form'] != '' -%}
                {% if column['form'] == 'text' -%}
                <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                    <Form.Label>{{column['camel']}}</Form.Label>
                    <Form.Control type="text" placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                </Form.Group>
                {% elif column['form'] == 'password' -%}
                <Form.Group className="mb-3" controlId="model.{column['alias']}">
                    <Form.Label>{column['camel']}</Form.Label>
                    <Form.Control type="password" placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                </Form.Group>
                {% elif column['form'] == 'number' -%}
                <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                    <Form.Label>{{column['camel']}}</Form.Label>
                    <Form.Control type="number" placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                </Form.Group>
                {% elif column['form'] == 'textarea' -%}
                <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                    <Form.Label>{{column['camel']}}</Form.Label>
                    <Form.Control as="textarea" rows={3} placeholder="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}')}/>
                </Form.Group>
                {% elif column['form'] == 'select' -%}
                <Form.Group className="mb-3" controlId="model.{{column['alias']}}">
                    <Form.Label>{{column['camel']}}</Form.Label>
                    <Form.Select aria-label="" defaultValue={{_{ + "model." + {column['alias']} + _}}} onChange={(e) => handleChange(e, '{{{column['alias']}}}'>
                      {% for d in column['data'] -%}
                      <option value="{{d['key']}}">{{d['val']}}</option>
                      {% endfor %}
                    </Form.Select>
                </Form.Group>
                </select>
              {%- endif %}
              {%- endfor %}
            </Form>

            <Button variant="primary" onClick={submit}>
                    Save
            </Button>
        </Container>
    );
}

export default {table['camel']}Form;